<template>
    <div class="head-menu-wrapper">
        <div v-if="slideVisable" @click="prev" class="menu-slide menu-prev"><i class="fa fa-chevron-left"></i></div>
        <div class="slide-wrapper" :style="`width:${slideVisable?'calc(100% - 80px)':'100%'}`">
            <ul :style="flexWidth" ref="flexWrapper">
                <li v-for="(item, index) in menuList" class="menu-item" @click="locateTo" :key="index">
                    <router-link :to="item.route">
                        <div class="menu-icon" :style="`background:url('/src/assets/img/${item.icon}.png');background-size: 100% 100%`">
                            <el-badge :value="events" v-if="item.route == 'grrc'"></el-badge>
                        </div>
                        <div class="menu-name">{{item.name}} <i class="fa fa-tag cur-icon"></i></div>
                    </router-link>
                </li>
            </ul>
        </div>
        <div v-if="slideVisable" @click="next" class="menu-slide menu-next"><i class="fa fa-chevron-right"></i></div>
    </div>
</template>

<script>
import {getModule} from '../../scripts/moduleTransform'

export default {
    name: 'headPart',
    data: function() {	
        return {
            menuList: null,
            events: 0,
            index: 0,
            
        }
    },
    methods: {
        locateTo(){
            localStorage.routeToggle = true;
        },
        getEventsNum() {
            if(!localStorage.isLogin) return
            this.$$http('GET_ALL_CALS',[localStorage.userid, encodeURI('进行中')]).then(data =>{
                this.events = data.length
            })
        },
        prev() {
            if(this.index == 0) return;
            this.index--;
            this.$refs.flexWrapper.style.marginLeft = -124.44444444*this.index + 'px'
        },
        next() {
            let max = this.menuList.length - 9;
            if(this.index == max) return;
            this.index++;
            this.$refs.flexWrapper.style.marginLeft = -124.44444444*this.index + 'px'
        }
    },
    computed: {
        slideVisable() {
            if(this.menuList) return this.menuList.length>9
            
        },
        flexWidth() {
            if(this.menuList) return 'width:'+(this.menuList.length>9?(124.44444444*(this.menuList.length))+'px':'100%');
        }
    },
    mounted() {
        let that = this;
        getModule('all').then(data=>{
            that.menuList = data
        })
        this.getEventsNum()
        this.$emitter.addListener('cal-change', ()=>{
            this.getEventsNum()
        })
    }
}
</script>

<style lang="scss">
.head-menu-wrapper{
    position: relative;
    .menu-slide{
        // display: inline-block;
        width: 40px;
        height: 85px;
        background: #ccc;
        cursor: pointer;
        font-size: 30px;
        color: #fff;
        text-align: center;
        line-height: 85px;
        transition: .4s ease-in-out;
        margin-top: 12px;
        &:hover{
            background:#409eff;
        }
    }
    .menu-prev{
        // float: left;
        // position: absolute;
        // top: 0;
        // left: 0
        float: left;
    }
    .menu-next{
        position: absolute;
        top: 0;
        right: 0
    }
    .el-badge{
        margin-left: 100%;
        transform: translate(-50%, -50%)
    }
    ul{
        // height: 1;
        // width: 100%;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: space-around;
        transition: .4s ease-in-out;
        // margin-left: -124.44444px;
    }
    .slide-wrapper{
        display: inline-block;
        // width: calc(100% - 80px);
        overflow: hidden;
        padding-top: 12px;
        // overflow-y: visible;
        // overflow-x: hidden;
        
    }
    .menu-item{
        cursor: pointer;
        transition: .2s ease-in-out;
        .menu-icon{
            width: 85px;
            height: 85px;
            
        }
        .menu-name{
            width: 85px;
            text-align: center;
            margin-top: 7px;
            color: #2d2f33
        }
        .cur-icon{
            display: none;
        }
        .router-link-active{
            .cur-icon{
                display: inline;
            }
        }
    }
    //  .fix-menu{
    //     box-sizing: border-box;
    //     position: fixed;
    //     top: 0;
    //     // zoom: 0.98;
    //     .menu-item{
    //         zoom: 0.9;
    //         -moz-transform:scale(0.9);
    //         -moz-transform-origin:top left;
    //     }
    //     padding: 10px;
    //     width: 1220px;
    //     margin-left: -10px;
    //     // border: 1px solid #ccc;
    //     border-top: none;
    //     z-index: 5;
    //     background: #FAFAFA;
    //     // border-radius: 0 0 15px 15px;
    //     box-shadow: 0 2px 12px 0 rgba(0,0,0,.4)
    // }
}

</style>